<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>美食决策助手</title>
    <style>
        body {
            margin: 0;
            background: #FFF3E0;
            font-family: '微软雅黑', sans-serif;
        }

        .banner {
            background: #FF6B6B;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        h1 {
            color: white;
            font-size: 4.5vw;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin: 0;
        }

        .container {
            display: flex;
            justify-content: space-around;
            max-width: 1200px;
            margin: 3rem auto;
            padding: 20px;
        }

        .category {
            width: 45%;
            text-align: center;
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .food-item {
            font-size: 3rem;
            margin: 1.5rem 0;
            cursor: pointer;
            transition: transform 0.3s;
            padding: 15px;
            border-radius: 15px;
        }

        .food-item:hover {
            transform: scale(1.1);
            background: #FFF8E1;
        }

        #breakfastDisplay { color: #E65100; }
        #drinkDisplay { color: #1976D2; }

        button {
            padding: 1rem 3rem;
            font-size: 1.5rem;
            border: none;
            border-radius: 50px;
            margin: 0 1rem;
            cursor: pointer;
            transition: all 0.3s;
            background: #4CAF50;
            color: white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        }

        button#stopBtn {
            background: #F44336;
        }

        button:hover {
            transform: scale(1.1);
        }

        /* 模态弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            max-width: 500px;
            text-align: left;
            position: relative;
        }

        .close {
            position: absolute;
            right: 20px;
            top: 10px;
            font-size: 2rem;
            cursor: pointer;
        }

        .highlight {
            background: #FFF3E0 !important;
            border: 2px solid #FF6B6B;
        }
    </style>
</head>
<body>
    <div class="banner">
        <h1>🥟 今日美食决策助手 ☕</h1>
    </div>

    <div class="container">
        <div class="category">
            <h2>早餐主食</h2>
            <div id="breakfastDisplay" class="food-item">🍔</div>
        </div>
        <div class="category">
            <h2>美味饮品</h2>
            <div id="drinkDisplay" class="food-item">☕</div>
        </div>
    </div>

    <div class="buttons" style="text-align: center; margin-bottom: 2rem;">
        <button id="startBtn" onclick="startRandom()">开始选择！</button>
        <button id="stopBtn" onclick="stopRandom()" disabled>停止！</button>
    </div>

    <!-- 信息模态框 -->
    <div id="infoModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2 id="foodTitle"></h2>
            <p id="foodInfo"></p>
            <p id="foodCalorie"></p>
            <p id="foodDesc"></p>
        </div>
    </div>

    <script>
        // 美食数据库
        const breakfasts = [
            { 
                name: "鲜肉包子", 
                info: "经典上海风味",
                calorie: "约250大卡/个",
                desc: "精选五花肉配老面发酵面皮，肉汁饱满"
            },
            {
                name: "生煎馒头",
                info: "底部酥脆",
                calorie: "约180大卡/个",
                desc: "传统工艺煎制，撒芝麻葱花提香"
            },
            {
                name: "葱油饼",
                info: "外酥里嫩",
                calorie: "约200大卡/个",
                desc: "手工揉制十二层酥皮"
            }
        ];

        const drinks = [
            {
                name: "现磨豆浆",
                info: "古法石磨",
                calorie: "约150大卡/杯",
                desc: "选用东北非转基因大豆"
            },
            {
                name: "咸豆花",
                info: "上海风味",
                calorie: "约120大卡/碗",
                desc: "紫菜虾皮配特制酱汁"
            },
            {
                name: "桂花酒酿",
                info: "传统甜品",
                calorie: "约180大卡/碗",
                desc: "加入新鲜桂花和枸杞"
            }
        ];

        let intervalId;
        let isRunning = false;
        let currentBreakfast = null;
        let currentDrink = null;

        function startRandom() {
            if (isRunning) return;
            isRunning = true;
            document.getElementById('startBtn').disabled = true;
            document.getElementById('stopBtn').disabled = false;
            
            intervalId = setInterval(() => {
                // 随机早餐
                const breakfastIndex = Math.floor(Math.random() * breakfasts.length);
                const breakfast = breakfasts[breakfastIndex];
                document.getElementById('breakfastDisplay').textContent = breakfast.name;
                currentBreakfast = breakfast;

                // 随机饮品
                const drinkIndex = Math.floor(Math.random() * drinks.length);
                const drink = drinks[drinkIndex];
                document.getElementById('drinkDisplay').textContent = drink.name;
                currentDrink = drink;
            }, 100);
        }

        function stopRandom() {
            clearInterval(intervalId);
            isRunning = false;
            document.getElementById('startBtn').disabled = false;
            document.getElementById('stopBtn').disabled = true;
            
            // 添加点击事件和高亮效果
            document.querySelectorAll('.food-item').forEach(item => {
                item.classList.add('highlight');
                item.style.cursor = 'pointer';
            });
        }

        // 点击食物显示详细信息
        document.getElementById('breakfastDisplay').onclick = function() {
            if (!isRunning && currentBreakfast) showInfo(currentBreakfast);
        };

        document.getElementById('drinkDisplay').onclick = function() {
            if (!isRunning && currentDrink) showInfo(currentDrink);
        };

        function showInfo(food) {
            document.getElementById('foodTitle').textContent = food.name;
            document.getElementById('foodInfo').textContent = `特色：${food.info}`;
            document.getElementById('foodCalorie').textContent = `热量：${food.calorie}`;
            document.getElementById('foodDesc').textContent = `描述：${food.desc}`;
            document.getElementById('infoModal').style.display = 'flex';
        }

        function closeModal() {
            document.getElementById('infoModal').style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            if (event.target.className === 'modal') {
                closeModal();
            }
        }
    </script>
</body>
</html>